<template>
  <div class="v-figure-style-four">
    <div class="title-content">
      <p class="module-name" v-if="moduleName">{{ moduleName }}</p>
      <span v-if="isShowMore" @click="toMore(link)">查看更多</span>
    </div>
    <ul class="four-content">
      <li v-for="(item, index) in list" :key="index">
        <div class="content-left">
          <van-image :src="item.imgUrl" fit="contain">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <!--             <img src=""/>-->
            </template>
          </van-image>
        </div>
        <div class="content-right">
          <p class="user-name etc">{{ item.userName }}</p>
          <p class="title etc">{{ item.title }}</p>
          <p class="introduce-text clamp2">{{ item.introduce }}</p>
          <p class="views">{{ item.viewNum }}次浏览</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import mixins from './../mixins'
export default {
  name: 'VFigureStyleFour',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {
        moduleName: '人物',
        isShowMore: true
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    link() {
      return this.option.link || ''
    },
    isShowMore() {
      return this.option.isShowMore || false
    },
    moduleName() {
      return this.option.moduleName || ''
    },
    list() {
      return this.option.list || [
        {
          userName: '张三',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '1',
          title: '高级技师',
          introduce: '西凉锦马超在此，吃个桃桃好凉凉',
          viewNum: '900'
        },
        {
          userName: '李四',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '2',
          title: '高级技师',
          introduce: '西凉锦马超在此，吃个桃桃好凉凉',
          viewNum: '920'
        },
        {
          userName: '张三',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '1',
          title: '高级技师',
          introduce: '西凉锦马超在此，吃个桃桃好凉凉',
          viewNum: '910'
        },
        {
          userName: '李四',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '2',
          title: '高级技师',
          introduce: '西凉锦马超在此，吃个桃桃好凉凉',
          viewNum: '903'
        }
      ]
    }
  },
  created() {
    console.log(this.option, 'styletwo---created')
  },
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";
@import "~@/styles/mixin.scss";
.v-figure-style-four {
  position: relative;
  background-color: #fafafa;
  padding: 0 rem(20) rem(20);
  .title-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: rem(23);
    margin-top: rem(20);
    .module-name {
      color: #333;
      font-size: rem(30);
      font-weight: bold;
      max-width: rem(450);
    }

    > span {
      color: #999;
      font-size: rem(28);
    }
  }
  .four-content {
    // padding: rem(30) rem(24);
    border-radius: rem(16);
    > li {
      width: rem(702);
      display: flex;
      margin-bottom: rem(20);
      background-color: #fff;
      padding: rem(24);
      border-radius: rem(16);
      .content-left {
        width: rem(316);
        // flex: 1;
        height: rem(236);
        border-radius: rem(12);
        overflow: hidden;
        .van-image {
          width: 100%;
          height: 100%;
        }
      }
      .content-right {
        width: rem(316);
        // flex: 1;
        margin-left: rem(26);
        .user-name {
          font-size: rem(30);
          font-weight: bold;
          color: #333333;
          word-break: break-all;
        }
        .title {
          font-size: rem(24);
          font-weight: 400;
          color: #667280;
          margin: rem(15) rem(0);
        }
        .introduce-text {
          font-size: rem(24);
          font-weight: 400;
          color: #999999;
          margin-bottom: rem(17);
        }
        .views {
          font-size: rem(24);
          font-weight: 400;
          text-align: right;
          color: #8196a1;
        }
      }
      &:last-child {
        margin-bottom: rem(0);
      }
    }
  }
}
</style>